<!-- * 即将弃用 * -->
<template>
  <div class="redeem-code" style="background: #ffffff">
    <NuxtLayout name="default">
      <div data-v-59871eb5="" class="mine-main" max="10">
        <div data-v-59871eb5="" class="pc hidden-xs-and-down">
          <div data-v-59871eb5="" class="header-container">
            <div data-v-59871eb5="" class="header-main justify-between">
              <div data-v-59871eb5="" class="header-left flex a-i-c" @click="edit">
                <div data-v-59871eb5="" class="avatar circle">
                  <div data-v-12bde410="" data-v-59871eb5="" class="image fill" alt="">
                    <img data-v-12bde410=""
                        loading="lazy"
                        :src="userStore.userInfo.avatar"
                                                                                            style="object-fit: cover;">
                    <!----> <!----></div>
                </div>
                <div data-v-59871eb5="" class="set-user flex a-i-c">
                  <div data-v-59871eb5="" class="name btn">
                    {{ userStore.userInfo.nickname }}
                  </div>
                  <img data-v-59871eb5="" alt=""
                       src=""
                       class="ic_edit btn"></div>

              </div>
              <!--<div data-v-59871eb5="" class="btns flex">
                <div data-v-59871eb5="" class="exchange-btn flex-center btn">
                  兑换会员
                </div>
                <div data-v-59871eb5="" class="upgradation-btn flex-center ml-15 btn">
                  升级会员
                </div>
              </div>-->
            </div>
          </div>
          <div data-v-59871eb5="" class="title bold">我的资产</div>
          <div data-v-59871eb5="" class="rights-scroll-container">
            <div data-v-59871eb5="" class="left-scroll-container flex-center" style="display: none;">
              <div data-v-59871eb5="" class="scroll-btn btn flex-center"><i data-v-59871eb5=""
                                                                            class="el-icon-arrow-left"></i></div>
            </div>
            <div data-v-59871eb5="" class="rights-container flex">
             <!-- <div data-v-59871eb5="" class="rights-info flex-column">
                <div data-v-59871eb5="" class="rights-top">
                  <div data-v-59871eb5="" class="label-bold bold">
                    未开通会员
                  </div>
                  <div data-v-59871eb5="" class="pay-btn btn">
                    加购
                  </div>
                </div>
                <div data-v-59871eb5="" class="time"></div>
                <div data-v-59871eb5="" class="pay bold btn mt-10">
                  立即开通
                </div>
                <div data-v-59871eb5="" class="line-container">
                  <div data-v-59871eb5="" class="line"></div>
                </div>
              </div>-->

              <div data-v-59871eb5="" class="rights-info flex-column">
                <div data-v-59871eb5="" class="rights-top">
                  <div data-v-59871eb5="" class="label-bold bold">剩余T币</div>
                  <div data-v-59871eb5="" class="pay-btn btn" @click="addVip">
                    加购
                  </div>
                </div>
                <div data-v-59871eb5="" class="time"></div>
                <div data-v-59871eb5="" class="day mt-10"><span data-v-59871eb5="" class="num bold">{{ userStore?.userInfo?.balance }}</span>
                  个
                </div>
              </div>

              <div data-v-59871eb5="" class="rights-info flex-column">
                <div data-v-59871eb5="" class="rights-top">
                  <div data-v-59871eb5="" class="label-bold bold">剩余绘画</div>
                  <div data-v-59871eb5="" class="pay-btn btn" @click="addVip">
                    加购
                  </div>
                </div>
                <div data-v-59871eb5="" class="time"></div>
                <div data-v-59871eb5="" class="day mt-10"><span data-v-59871eb5="" class="num bold">{{ userStore?.userInfo?.balance_draw }}</span>
                  条
                </div>
              </div>


            </div>


          </div>



          <div data-v-59871eb5="" class="title bold">快速管理</div>

          <div data-v-59871eb5="" class="menus">
            <div data-v-59871eb5="" class="menu-item btn" @click="addVip" v-if="is_vip == 1">
              <img data-v-59871eb5="" alt="" :src="UrlImg + '/resource/image/adminapi/default/pc-select-member.png'" class="icon">
              <div data-v-59871eb5="" class="menu-right">
                <div data-v-59871eb5="" class="label">充值T币</div>
                <div data-v-59871eb5="" class="desc">充值T币畅享AI功能</div>
              </div>
            </div>

            <div data-v-59871eb5="" class="menu-item btn" @click="zhuanjingbi" v-if="is_zhuanjingbi == 1">
              <img data-v-59871eb5="" alt="" :src="UrlImg + '/resource/image/adminapi/default/pc-recharge.png'" class="icon">
              <div data-v-59871eb5="" class="menu-right">
                <div data-v-59871eb5="" class="label">赚取T币</div>
                <div data-v-59871eb5="" class="desc">免费T币权益等你来拿</div>
              </div>
            </div>

            <div data-v-59871eb5="" class="menu-item btn" @click="fenxiao" v-if="is_fenxiao == 1">
              <img data-v-59871eb5="" alt="" :src="UrlImg + '/resource/image/adminapi/default/pc-distribution.png'" class="icon">
              <div data-v-59871eb5="" class="menu-right">
                <div data-v-59871eb5="" class="label">分销中心</div>
                <div data-v-59871eb5="" class="desc">邀请好友免费得T币</div>
              </div>
            </div>

            <div data-v-59871eb5="" class="menu-item btn" @click="kamiduihuan" v-if="is_kamiduihuan == 1">
              <img data-v-59871eb5="" alt="" :src="UrlImg + '/resource/image/adminapi/default/pc-select-card-code.png'" class="icon">
              <div data-v-59871eb5="" class="menu-right">
                <div data-v-59871eb5="" class="label">卡密兑换</div>
                <div data-v-59871eb5="" class="desc">使用卡密兑换T币</div>
              </div>
            </div>




          </div>
        </div>
      </div>
    </NuxtLayout>

    <ElDialog v-model="showCheckResult" width="400" append-to-body>
      <template #header>
        <div class="text-lg text-center font-medium">查询结果</div>
      </template>
      <div class="h-[160px]">
        <el-form-item label="卡密类型：">
          {{ checkResult.type_desc }}
        </el-form-item>
        <el-form-item label="卡密面额：">
          {{ checkResult.content }}
        </el-form-item>
        <el-form-item label="金币：" v-if=" checkResult.content1">
          {{ checkResult.content1 }}
        </el-form-item>
        <el-form-item label="兑换时间：">
          {{ checkResult.failure_time }}
        </el-form-item>
        <el-form-item label="有效期至：" v-if="checkResult.valid_time">
          {{ checkResult.valid_time }}
        </el-form-item>
      </div>
      <div
          class="flex-1 flex justify-center items-center bg-white pt-[20px]"
      >
        <el-button
            type="primary"
            size="large"
            :loading="isUse"
            @click="onUseRedeemCode"
        >
          立即兑换
        </el-button>
      </div>
    </ElDialog>

    <UserPop ref="userPopRef"> </UserPop>
  </div>
</template>

<script setup lang="ts">
import {useUserStore} from "~/stores/user";
const userPopRef = shallowRef()
const router = useRouter()
const userStore = useUserStore()
const config_arr = ref([])
const is_vip = ref(0)
const is_zhuanjingbi = ref(0)
const is_fenxiao = ref(0)
const is_kamiduihuan = ref(0)

import {ref} from 'vue'
import {useAppStore} from '~/stores/app'
import {copy} from '@/utils/util'
import {useLockFn} from '~/composables/useLockFn'
import type {RedeemCodeResponse} from '~/api/redeem_code'
import {checkRedeemCode, useRedeemCode,getOpen} from '~/api/redeem_code'
import feedback from '~/utils/feedback'
import {getApiUrl} from "~/utils/env";
import UserPop from "~/layouts/components/header/user-info.vue";
definePageMeta({
  auth: true,
  layout: false
})

const UrlImg = `${getApiUrl()}`

const appStore = useAppStore()
// 兑换码
const code = ref<string>('')
// 显示查询结果
const showCheckResult = ref<boolean>(false)
// 查询结果
const checkResult = ref<RedeemCodeResponse>({
  content: '',
  valid_time: '',
  failure_time: '',
  id: '',
  sn: '',
  type: '',
  type_desc: ''
})


function addVip(){
  //跳转到vip
  router.push({
    path: '/openvip',
    query: {}
  })
}


function zhuanjingbi(){
  router.push({
    path: '/recharge',
    query: {}
  })
}

function fenxiao(){
  router.push({
    path: '/promotion/distribution',
    query: {}
  })
}


function kamiduihuan(){
  router.push({
    path: '/redeem_code',
    query: {}
  })
}

function edit(){
  userPopRef.value.open()
}



// 获取卡密信息设置
const redeemCodeConfig = computed(() => appStore.getCardCodeConfig)

const onCopy = (text: string) => {
  copy(text)
}

const {isLock: isQuery, lockFn: queryRedeem} = useLockFn(async () => {
  try {
    const data = await checkRedeemCode({sn: code.value})
    showCheckResult.value = true
    checkResult.value = data
  } catch (error) {
    code.value = ''
    console.log('查询卡密失败=>', error)
  }
})

const {isLock: isUse, lockFn: onUseRedeemCode} = useLockFn(async () => {
  try {
    await useRedeemCode({sn: code.value})
    feedback.msgSuccess('兑换成功')
    showCheckResult.value = false
    code.value = ''
  } catch (error) {
    console.log('兑换卡密失败=>', error)
  }
})

onMounted(async () => {
  const datas = await getOpen({})
  if(datas.includes("addVip")){
    is_vip.value = 1
  }
  if(datas.includes("zhuanjingbi")){
    is_zhuanjingbi.value = 1
  }
  if(datas.includes("kamiduihuan")){
    is_kamiduihuan.value = 1
  }
  if(datas.includes("fenxiao")){
    is_fenxiao.value = 1
  }

})

</script>
<style>
.mine-main[data-v-59871eb5] {
  width: 100%;
  padding-bottom: 66px;
  box-sizing: border-box;
  background: #ffff;
}
.mine-main .pc[data-v-59871eb5] {
  width: 100%;
  padding: 30px 40px;
  box-sizing: border-box;
}
.mine-main .pc .header-container[data-v-59871eb5] {
  width: 100%;
}
.mine-main .pc .title[data-v-59871eb5] {
  font-size: 16px;
  margin: 32px 0 16px;
}
.mine-main .pc .rights-scroll-container[data-v-59871eb5] {
  width: 100%;
  position: relative;
  padding-bottom: 8px;
}
.mine-main .pc .rights-scroll-container .rights-container[data-v-59871eb5] {
  width: 100%;
  overflow-x: scroll;
}
.mine-main .pc .title[data-v-59871eb5] {
  font-size: 16px;
  margin: 32px 0 16px;
}
.mine-main .pc .header-container .header-main[data-v-59871eb5] {
  width: 100%;
  height: 112px;
  border-radius: 15px;
  background: linear-gradient(177deg,#cae2ff,#f8f8f7);
  padding: 0 35px 0 16px;
  box-sizing: border-box;
}
.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a-i-c, .icon_popover {
  align-items: center;
}
.flex {
  display: flex;
}
.a-i-c {
  align-items: center;
}
.flex {
  display: flex;
}
.mine-main .pc .header-container .header-main .header-left .avatar[data-v-59871eb5] {
  width: 64px;
  height: 64px;
  overflow: hidden;
  box-shadow: 3px 6px 15px 0 rgba(32,52,121,.18);
  border: 1px solid #fff;
  margin-right: 9px;
}
.circle {
  border-radius: 50%;
}
.a-i-c, .icon_popover {
  align-items: center;
}
.mine-main .pc .header-container .header-main .header-left .set-user .name[data-v-59871eb5] {
  font-size: 20px;
  font-weight: 700;
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.btn {
  cursor: pointer;
  user-select: none;
}
.mine-main .pc .header-container .header-main .header-left .set-user .ic_edit[data-v-59871eb5] {
  width: 16px;
  height: 16px;
  margin-right: 18px;
}
.mine-main .pc .header-container .header-main .btns .exchange-btn[data-v-59871eb5] {
  width: 120px;
  height: 44px;
  font-size: 15px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dcdee0;
}
.btn {
  cursor: pointer;
  user-select: none;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mine-main .pc .header-container .header-main .btns .upgradation-btn[data-v-59871eb5] {
  width: 120px;
  height: 44px;
  color: #fff;
  font-size: 15px;
  border-radius: 8px;
  background-color: #348aff;
  border: 1px solid #dcdee0;
}
.btn {
  cursor: pointer;
  user-select: none;
}
.ml-15 {
  margin-left: 15px;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mine-main .pc .title[data-v-59871eb5] {
  font-size: 16px;
  margin: 32px 0 16px;
}
.bold {
  font-weight: bold;
}
.mine-main .pc .rights-scroll-container .rights-container[data-v-59871eb5] {
  width: 100%;
  overflow-x: scroll;
}
.mine-main .pc .rights-scroll-container .rights-container .rights-info[data-v-59871eb5] {
  width: 242px;
  min-width: 242px;
  height: 143px;
  border-radius: 16px;
  border: 1px solid #dcdee0;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 24px;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.mine-main .pc .rights-scroll-container .rights-container .rights-info .rights-top[data-v-59871eb5] {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.mine-main .pc .rights-scroll-container .rights-container .rights-info .time[data-v-59871eb5] {
  font-size: 12px;
  color: #969799;
  line-height: 18px;
  height: 18px;
}
.mine-main .pc .rights-scroll-container .rights-container .rights-info .pay[data-v-59871eb5] {
  font-size: 24px;
  color: #348aff;
}
.btn {
  cursor: pointer;
  user-select: none;
}
.pay-btn[data-v-59871eb5] {
  min-width: 54px;
  height: 31px;
  font-size: 15px;
  border-radius: 4px;
  background: #f3f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line-container{
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #ececec;
  margin-top: 10px;
}

.mine-main .pc .menus[data-v-59871eb5] {
  width: calc(100% + 18px);
  display: flex;
  flex-wrap: wrap;
  margin: -10px 0 0 -9px;
}
.mine-main .pc .menus .menu-item[data-v-59871eb5] {
  width: calc(25% - 18px);
  height: 88px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 16px 12px 12px;
  box-sizing: border-box;
  border: 1px solid #dcdee0;
  margin: 9px;
}
.mine-main .pc .menus .menu-item .menu-right[data-v-59871eb5] {
  margin-top: -10px;
}
.mine-main .pc .menus .menu-item .menu-right .label[data-v-59871eb5] {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.mine-main .pc .menus .menu-item .menu-right .desc[data-v-59871eb5] {
  font-size: 13px;
  color: #969799;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
 .icon[data-v-59871eb5] {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
</style>
